<template>
    <div class="aplayer-controller" v-if="musicList.length !== 0">
        <div class="controller" @click="changePlayerMode()">{{ controllerText }}</div>
        <aplayer
            mute
            :music="musicList[0]"
            :list="musicList"
            :listFolded="true"
            :mini="isPlayerMini"
        />
    </div>
</template>

<script>
import Aplayer from "vue-aplayer";

export default {
    name: "AplayerController",
    components: {
        Aplayer
    },
    data() {
        return {
            musicList: [{
                title: "RADWIMPS - 前前前世 (movie ver.).mp3",
                artist: "RADWIMPS",
                src: require("@/assets/media/RADWIMPS - 前前前世 (movie ver.).mp3"),
                pic: "/moeplayer/aplayer/secretbase.jpg"
            }, {
                title: "Ryan.B AY楊佬叁 - 再也没有(1).mp3",
                artist: "Ryan.B AY楊佬叁",
                src: require("@/assets/media/Ryan.B AY楊佬叁 - 再也没有(1).mp3"),
                pic: "/moeplayer/aplayer/secretbase.jpg"
            }],
            isPlayerMini: true,
            controllerText: "展开"
        }
    },
    methods: {
        changePlayerMode() {
            this.isPlayerMini = !this.isPlayerMini;
            if(this.isPlayerMini) {
                this.controllerText = "展开";
            } else {
                this.controllerText = "收回"
            }
        }
    }
}
</script>

<style scoped>

.aplayer-controller {
    flex-direction: column;
    align-items: flex-start;
}

.controller {
    margin-left: 10px;
    /* 处理aplayer自带的margin 5px 导致控制文字与播放器中间有缝隙 */
    margin-bottom: -5px;
    padding: 5px;
    cursor: pointer;
    user-select: none;
    background-color: #42b983;

    font-family: "huyou", serif;
    font-size: larger;
    font-weight: bolder;
}

</style>
